<template>
    <div class='add'>
        <div class="add_header">
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/goods' }">商品列表</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="add_body">
            <div class="add_body_title">
                <el-alert
                title="消息提示 : 添加商品信息"
                type="info"
                center
                :closable="false"
                show-icon>
                </el-alert>
            </div>
            <div class="add_body_steps">
                <el-steps :active="activeName*1" align-center finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
                </el-steps>
            </div>
            <el-tabs tab-position="left" style="height: 100%;" v-model="activeName" :before-leave="beforeLeaveTab" >
              <el-tab-pane label="基本信息" name="0" >
                <!-- 基本信息的form表单 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="商品名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="商品价格" prop="price">
                    <el-input v-model="ruleForm.price"></el-input>
                  </el-form-item>
                  <el-form-item label="商品重量" prop="weight">
                    <el-input v-model="ruleForm.weight"></el-input>
                  </el-form-item>
                  <el-form-item label="商品数量" prop="quantity">
                    <el-input v-model="ruleForm.quantity"></el-input>
                  </el-form-item>
                  <el-form-item label="商品分类">
                    <div class="block">
                      <span class="demonstration">选择商品分类</span>
                      <el-cascader :options="sortclassdata" :props="sortProps" v-model="ruleForm.sortclass"></el-cascader>
                    </div>                   
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="商品参数"  name="1">
                <el-form label-width="80px" label-position="left" >
                  <el-form-item v-for="(item,i) in parameterlistdata" :key="item.attr_id">
                    
                    <div>{{item.attr_name}}</div>
                      <el-checkbox-group v-model="checked">
                        <el-checkbox border v-for="(items,index) in item.attr_vals" :key="index" @change="editchange(index,i)">{{items}}</el-checkbox>
                      </el-checkbox-group>
                  </el-form-item>
                </el-form>


                
              </el-tab-pane>
              <el-tab-pane label="商品属性"  name="2">
                <el-form label-width="80px" label-position="left" >
                  <el-form-item v-for="(item,i) in attributelist" :key="item.attr_id">
                    
                    <div>{{item.attr_name}}</div>
                    <el-checkbox-group v-model="checked">
                      <el-checkbox border v-for="(items,index) in item.attr_vals" :key="index" @change="editchange(index,i)">{{items}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>


              </el-tab-pane>
              <el-tab-pane label="商品图片"  name="3">
                <el-upload
                  class="upload-demo"
                  action="http://127.0.0.1:8888/api/private/v1/upload"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="imageList"
                  list-type="picture"
                  :headers="header"
                  :on-success="handleSuccess"
                  >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-tab-pane>
              <el-tab-pane label="商品内容"  name="4">
                <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" 
                  style="height: 600px; margin-bottom: 10px"></quill-editor>
                  <el-button type="primary" @click="additem">添加商品</el-button>
              </el-tab-pane>
               
            </el-tabs>

           
            
            
        </div>
    </div>
</template>

<script>
import { getsortclass, getparameterlist,setadditem } from "@/api/add.js";

export default {
  data() {
    return {
      //富文本内容
      content: "",
      editorOption: {},
      sortclassdata: [], // 商品分类数据
      ruleForm: {
        name: "",
        price: "",
        weight: "",
        quantity: "",
        sortclass: []
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" }
        ],
        quantity: [
          { required: true, message: "请输入商品数量", trigger: "blur" }
        ]
      },
      sortProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
        expandTrigger: "hover"
      },
      activeName: "0",
      // 商品参数 数据
      parameterlistdata: [],
      checked: true,
      // 属性列表数据
      attributelist: [],
      // 图片的 数据
      imageList: [],
      header: {
        Authorization: localStorage.getItem("token")
      },
      // 图片 的 集合
      urlarr:[]
    };
  },
  mounted() {
    // 商品分类数据接口
    getsortclass().then(res => {
      this.sortclassdata = res.data;
      // console.log(res.data);
    });
  },
  methods: {
    // 是否切换
    beforeLeaveTab(activeName, oldActiveName) {
      if (
        oldActiveName === "0" &&
        (!this.ruleForm.name ||
          !this.ruleForm.price ||
          !this.ruleForm.weight ||
          !this.ruleForm.quantity ||
          this.ruleForm.sortclass.length !== 3)
      ) {
        this.$message({
          message: "请先选择商品分类！",
          type: "error"
        });
        return false;
      } else if (activeName === "1") {
        this.getparameterlistdata({
          id: this.ruleForm.sortclass[2],
          sel: "many"
        });
      } else if (activeName === "2") {
        this.getparameterlistdata({
          id: this.ruleForm.sortclass[2],
          sel: "only"
        });
      }
    },
    // 商品参数
    async getparameterlistdata(parems) {
      let res = await getparameterlist(parems);
      // console.log(res);
      if (res.meta.status === 200) {
        this.$message.success("获取参数成功！");
        res.data.forEach(item => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
          item.attr_vals.forEach(items=>{
            return items.status = false
          })


        });
      }
      if (this.activeName === "1") {
        this.parameterlistdata = res.data;
      } else if (this.activeName === "2") {
        this.attributelist = res.data;
        // console.log(this.attributelist);
      }
    },
    // 点击 消失
    editchange(index, i) {
      this.checked = true;
      if (this.activeName === "1") {
        this.parameterlistdata[i].attr_vals.splice(index, 1);
      } else if (this.activeName === "2") {
        this.attributelist[i].attr_vals.splice(index, 1);
      }
    },
    // 移除 图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
      let path = file.response.data.tmp_path
      let _index=this.urlarr.findIndex(item=>{
        return item.pic == path
      })
      console.log(_index);
      this.urlarr.splice(_index,1)

      this.$message({
        showClose: true,
        message: "移除成功",
        type: "error"
      });
      console.log(this.urlarr);
    },
    handlePreview(file) {},
    // 上传图片
    handleSuccess(response, file, fileList) {
      // console.log(file);
      // console.log(fileList);
      // console.log(response.data.tmp_path);
      this.urlarr=[]
      fileList.forEach(item=>{
        this.urlarr.push({pic:item.response.data.tmp_path})
      })
      console.log(this.urlarr);
      this.$message({
        showClose: true,
        message: response.meta.msg,
        type: "success"
      });
    },
    //添加商品
    additem(){
      let parems={
        attrs: [],
        goods_cat:this.ruleForm.sortclass.join(','),
        goods_introduce:this.content,
        goods_name: this.ruleForm.name,
        goods_number: this.ruleForm.quantity,
        goods_price: this.ruleForm.price,
        goods_weight: this.ruleForm.weight,
        pics:this.urlarr
      }
      // 添加商品 接口
      setadditem(parems).then(res=>{
        console.log(res);
        this.$router.push('/goods')
      })
      console.log(parems);
      // console.log(249,this.ruleForm.sortclass.join(','));/
      // console.log(this.content);
      // console.log(this.editorOption);
    }


  },
  components: {}
};
</script>

<style lang='scss' scoped>
.add {
  width: 100%;
  height: 100%;
  background: #eee;
  .add_header {
    width: 100%;
    height: 80px;
    padding-top: 30px;
    padding-left: 30px;
  }
  .add_body {
    width: 97%;
    height: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    //   padding: 30px;
    .add_body_title {
      width: 90%;
      height: 40px;
      margin: 0 auto;
      padding-top: 10px;
      line-height: 30px;
    }
    .add_body_steps {
      padding-top: 20px;
      height: 100px;
    }
    .demonstration {
      margin-right: 20px;
    }
  }
}
</style>
<style>
.ql-container {
  height: 90% !important;
}
</style>

